<template>
  <view :style="{paddingBottom: safeBottom + 'px'}">
    <TnNavbar fixed back-icon="" home-icon="" :center="false">
      <view class="tn-pl-sm tn-pr-xs tn-flex items-center justify-between" style="height: 100%;position: relative">
        <image @click="showPopup = !showPopup" :src="pmAvatar" style="width: 65rpx; height: 65rpx;border-radius: 100%"></image>
        <input
            style="
              border: 1px solid #eee;
              height: 65rpx;
              border-radius: 65rpx;
              width: calc(100% - 75rpx);
              padding: 0 70rpx 0 50rpx;
            "
            placeholder="技能名称,点头像筛选更多"
            confirm-type="search"
            @confirm="search"
            v-model="where.name"
        >
        <tn-icon name="search" style="position: absolute;left: 110rpx; top: 50%; transform: translateY(-50%)"></tn-icon>
      </view>
    </TnNavbar>
    <TnPopup v-model="showPopup" open-direction="top">
      <view :style="{paddingTop: height + 10 + 'px'}">
        <swiper style="height: 450px;width: 100%" @change="cardSwiper" :circular="true">
          <swiper-item>
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue">技能类型</text>
                <text class="text-ABC text-blue">type</text>
              </view>
            </view>
            <view class="padding-lr-sm flex justify-between flex-wrap align-center">
              <button
                  class="text-sm margin-bottom-sm"
                  :class="item.value === where.category ? 'bg-blue' : 'bg-blue light'"
                  style="width: 22%"
                  v-for="item in categoryFilterList"
                  @click="chooseKindFilter(item)"
              >
                {{ item.name }}
              </button>
            </view>
            <view class="cu-bar">
              <view class="action sub-title">
                <text class="text-xl text-bold text-blue">技能属性</text>
                <text class="text-ABC text-blue">attribute</text>
              </view>
            </view>
            <view class="padding-lr-sm">
              <scroll-view scroll-y style="height: 300px;padding: 10px 0;">
                <view class="flex align-center flex-wrap padding-tb-sm">
                  <view
                      @click="chooseRestrain(0)"
                      style="width: 20%;"
                      class="flex justify-center margin-bottom-sm"
                  >
                    <view style="width: 80%;" class="flex justify-center align-center text-black">
                      ALL
                    </view>
                  </view>
                  <view
                      @click="chooseRestrain(item.id)"
                      v-for="item in restrainList" :key="item.id" style="width: 20%;"
                      class="flex justify-center margin-bottom-sm"
                  >
                    <view style="width: 80%;" class="flex justify-center align-center flex-direction">
                      <image :src="item.icon" style="width: 60rpx; height: 60rpx"></image>
                      <view class="text-sm text-black">{{ item.cn }}</view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </swiper-item>
        </swiper>
<!--        <view class="indication">
          <block v-for="(item,index) in 3" :key="index">
            <image class="spot" src="/static/title1.png" v-if="cardCur===index"></image>
            <image class="spot" src="/static/title.png" v-else></image>
          </block>
        </view>-->
      </view>
    </TnPopup>

    <view v-for="(item, index) in list"
          class="tn-pt-xs tn-m">
      <view class="flex align-center padding-tb-xs padding-lr-sm" style="background-color: #0a203e">
        <view style="border: 1px solid #11325e;" class="padding-xs flex align-center justify-center">
          <image :src="item.type_icon" style="width: 50rpx;height: 50rpx"></image>
        </view>
        <view class="padding-left">
          <view class="flex align-end">
            <text class="text-lg margin-right-sm" style="color: #c3d6fd">{{ item.name }}</text>
            <text :style="{color: item.category === 1 ? '#fe0000' : item.category === 2 ? '#f493f6' : '#99ff00'}">
              {{ item.category_name }}
            </text>
          </view>
          <view>
            <text style="color: #fbfe4f">威力: {{ item.power }}</text>
            <text style="color: #3ddbf4" class="margin-left-sm">PP: {{ item.max_pp }}</text>
            <text style="color: #fff" class="margin-lr-sm">ID: {{ item.id }}</text>
            <text style="color: #fff">命中率: {{ item.must_hit > 0 ? '必中' : item.accuracy }}</text>
          </view>
        </view>
      </view>
      <scroll-view scroll-y style="background-color: #14335e; height: 150px">
        <view class="padding-tb-sm padding-lr" style="color: #3fe1f9; ">
          <text v-text="item.skill_content"></text>
        </view>
      </scroll-view>
    </view>
    <view class="tn-flex-center">
      <TnButton text @click="loadMore" debounce :disabled="showLoading">
        {{ status === 'loadmore' ? '点击加载更多' : status === 'loading' ? '正在加载' : '到底啦~' }}
      </TnButton>
    </view>
    <loading-page :show="showLoading" @click.stop=""/>
  </view>
</template>

<script setup>
  import {ref, reactive, getCurrentInstance,onMounted, nextTick, computed} from 'vue'
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import TnIcon from '../../uni_modules/tuniaoui-vue3/components/icon/src/icon.vue';
  import TnNavbar from '../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue';
  import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
  import TnButton from "../../uni_modules/tuniaoui-vue3/components/button/src/button.vue";
  import LoadingPage from "../../components/loadingPage.vue";

  const {
    proxy
  } = getCurrentInstance()

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const showLoading = ref(false)

  const pmAvatar = __wxConfig.accountInfo.icon

  // 初始数据
  const list = ref([])
  // 分页数据
  const where = reactive({
    page: 1,
    type: 0,
    limit: 10,
    name: '',
    category: 0
  })

  const categoryFilterList = ref([
    {
      name: '全部',
      value: 0
    }, {
      name: '物理攻击',
      value: 1
    }, {
      name: '特殊攻击',
      value: 2
    }
  ])

  const totalPages = ref(0)

  const getList = async () => {
    showLoading.value = true;
    if (where.page === 1) {
      ({records: list.value, pages: totalPages.value} = await proxy.$api.getSkillsQuery(where))
    } else {
      const {records} = await proxy.$api.getSkillsQuery(where)
      list.value.push(...records)
    }
    showLoading.value = false
  }

  const showPopup = ref(false)

  // 获取属性列表
  const restrainList = ref([])
  const getRestrainList = async () => {
    restrainList.value = await proxy.$api.getRestrainList()
  }

  const cardCur = ref(0)
  const cardSwiper = (e) => {
    cardCur.value = e.detail.current
  }

  // 搜索
  const search = async () => {
    where.page = 1
    showPopup.value = false
    await getList()
  }

  const chooseKindFilter = async (item) => {
    where.category = item.value
    await search()
  }

  // 属性查找
  const chooseRestrain = (id) => {
    where.type = id
    search()
  }

  const status = computed(() => {
    if (showLoading.value) {
      return 'loading'
    } else if (where.page < totalPages.value) {
      return 'loadmore'
    } else {
      return 'nomore'
    }
  })

  // 触底触发
  const loadMore = async () => {
    if (status.value === 'loading') return
    if (status.value === 'loadmore') {
      where.page++
      await getList()
    } else {
      showLoading.value = false
    }
  }

  onMounted(async () => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getList()
    await getRestrainList()
  })
</script>

<style scoped lang="scss">
  .indication {
    z-index: 11;
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .spot {
    // background-color: #FBBD12;
    opacity: 0.8;
    width: 20rpx;
    height: 20rpx;
    margin: 0 10rpx !important;
    left: 0;
    top: 0;
    position: relative;
    z-index: 12;
  }
</style>
